window.onload=function (){
    let displayImgList=document.getElementById('displayImgList');
    let introduction=document.getElementById('introduction');
    let allPro=document.getElementById('allPro');
    let hundred=document.getElementById('hundred');
    let tri=document.getElementById('tri');
    let close=document.getElementById('close');


    function allProductClick(){
        allPro.classList.add('blue');
        hundred.classList.remove('blue');
        tri.style.right='573px';
    }
    function hundredClick() {
        allPro.classList.remove('blue');
        hundred.classList.add('blue');
        tri.style.right='472px';
    }

    function displayIntroduction(event){//根据图片相对网页位置设置展示信息的位置
        introduction.style.display='block';
        setTimeout(()=>{
            introduction.style.opacity='1';
        },300);
        if (event.target.tagName.toLowerCase()==='img'){
            let ele=event.target.getBoundingClientRect();
            let winWith=displayImgList.parentElement.getBoundingClientRect().width;
            let winHeight=displayImgList.parentElement.getBoundingClientRect().height;
            let top=ele.top+document.scrollingElement.scrollTop;
            let left=ele.left+ele.width+document.scrollingElement.scrollLeft+2;

            if (left>winWith){
                introduction.style.left=left-winWith-2+"px";
                introduction.style.top=top+"px";
            }else if(left>900){
                introduction.style.left=left-ele.width*1.85+"px";
                introduction.style.top=top+"px";
                console.log(winHeight,introduction.style.top)
            }
            else {
                introduction.style.left=left+"px";
                introduction.style.top=top+"px";
            }
        }
    }
    function closeInfo(){
        introduction.style.opacity='0';
        setTimeout(()=>{
            introduction.style.display='none';
        },300)
    }

    displayImgList.onclick=displayIntroduction;
    allPro.onclick=allProductClick;
    hundred.onclick=hundredClick;
    close.onclick=closeInfo;

}
